<template>
  <div class="mine padding-lr20 padding-b160">
    <!-- 头部 -->
    <div class="header flex justify-between">
      <img
        class="radius-50p margin-r24"
        :src="user.head_img?user.head_img:$nodata"
        alt
        @click="to('/setup/mine')"
      />
      <div class="flex-grow flex flex-column text-ff justify-around">
        <div class="rem-36px">{{user.user_name}}</div>
        <div class="rem-26px h-16">{{user.user_phone}}</div>
      </div>
      <div class="flex align-center">
        <i class="iconfont icon-shezhi1 text-ff" @click="to('/setup/mine')"></i>
      </div>
    </div>
    <!--  -->
    <div class="card flex align-center bg-ff rem-36px margin-b20" @click="cardto('/recruit/card')">
      <i class="iconfont icon-mingpian"></i>我的名片
    </div>
    <!-- 常用功能 -->
    <div class="bg-ff ability border-bottom">
      <div class="rem-36px ability_title">常用功能</div>
      <div class="flex justify-between text-center rem-26px text-content">
        <div @click="to('/recruit/apply')">
          <img src="@/assets/img/mine1.png" alt />
          <div>项目申请</div>
        </div>
        <div @click="to('/cardList')">
          <img src="@/assets/img/rmine2.png" alt />
          <div>企业名片</div>
        </div>
        <div @click="to('/recruit/friend')" class="position-relative">
          <div class="friend_account" v-show="friend_account">{{friend_account}}</div>
          <img src="@/assets/img/rmine1.png" alt />
          <div>我的好友</div>
        </div>
        <div @click="to('/record')">
          <img src="@/assets/img/mine3.png" alt />
          <div>浏览记录</div>
        </div>
      </div>
    </div>
    <!-- 关于我们 -->
    <div class="tube bg-ff">
      <div class="c-99 rem-32px">
        <div class="tube_li flex align-center" @click="to('/setup/all')">
          <i class="iconfont icon-geren"></i>
          <div class="flex-grow text-1a">个人资料</div>
          <van-icon name="arrow" />
        </div>
        <div class="tube_li flex align-center" @click="httpGo">
          <i class="iconfont icon-geren"></i>
          <div class="flex-grow text-1a">旗舰店入口</div>
          <van-icon name="arrow" />
        </div>
        <div class="tube_li flex align-center" @click="to('/businessAbout', 1)">
          <i class="iconfont icon-lou"></i>
          <div class="flex-grow text-1a">关于我们</div>
          <van-icon name="arrow" />
        </div>
        <div class="tube_li flex align-center" @click="to('/Feedback')">
          <i class="iconfont icon-bianji"></i>
          <div class="flex-grow text-1a">意见反馈</div>
          <van-icon name="arrow" />
        </div>
        <div class="tube_li flex align-center" @click="to('/businessAbout', 2)">
          <i class="iconfont icon-zhinan"></i>
          <div class="flex-grow text-1a">用户指南</div>
          <van-icon name="arrow" />
        </div>
        <div class="tube_li flex align-center" @click="to('/businessManage', 3)">
          <i class="iconfont icon-shezhi2"></i>
          <div class="flex-grow text-1a">数据查询</div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="login margin-t20 text-ff text-center" v-if="token">
      <div class="sure bg-ff0 rem-34px" @click="backlogin">退出并登录企业账户</div>
    </div>
    <div class="login margin-t20 text-ff text-center" v-if="!token">
      <div class="sure bg-ff0 rem-34px" @click="loginto">登录</div>
    </div>

    <!-- 底部导航 -->
    <footerNav :active="4"></footerNav>
  </div>
</template>

<script>
import footerNav from "../../components/footer";
export default {
  components: {
    footerNav
  },
  data() {
    return {
      user: "",
      token: false,
      friend_account: 0,
      rsaUrl: ""
    };
  },
  mounted() {
    document.querySelector("html").style.backgroundColor = "#f5f5f5";
    localStorage.setItem("friend_index", 0);
    if (window.localStorage.getItem("token")) {
      this.token = true;
      this.getUser();
    } else {
      this.token = false;
      this.$router.push({
        path: "/recruit/login"
      });
      localStorage.setItem("login", "1");
    }
  },
  methods: {
    backlogin() {
      if (!this.token) {
        this.$toast("请先登录");
        return false;
      }
      this.$axios
        .post("/wap/login/quitLogin", {
          token: window.localStorage.getItem("token")
        })
        .then(res => {
          if (res.data.code == 0) {
            window.localStorage.removeItem("phone");
            window.localStorage.removeItem("token");
            window.localStorage.removeItem("user_id");
            window.localStorage.removeItem("qx_token");
            window.localStorage.removeItem("qx_phone");
            window.localStorage.removeItem("qx_id");
            window.localStorage.removeItem("vid");
            window.localStorage.removeItem("friend_type");
            window.localStorage.removeItem("is_perfect");

            window.localStorage.removeItem("openid");
            window.localStorage.removeItem("user_name");
            window.localStorage.removeItem("head_img");

            this.$toast(res.data.msg);
            this.$router.push({
              path: "/recruit/login"
            });
            localStorage.setItem("login", "1");
          }
        });
    },
    // 旗舰店入口
    rsaLogin() {
      this.$axios
        .post("/wap/register/rsaLogin", {
          user_id: window.localStorage.getItem("user_id")
        })
        .then(res => {
          this.rsaUrl = res.data.url;
        });
    },
    loginto() {
      this.$router.push({
        path: "/recruit/login"
      });
    },
    getUser() {
      if (!this.token) {
        this.$toast("请先登录");
        return false;
      }
      this.$axios
        .post("/wap/personal/card", {
          token: window.localStorage.getItem("token"),
          type: 1
        })
        .then(res => {
          window.localStorage.setItem("user_id", res.data.data.user.id);
          this.rsaLogin();
          this.user = res.data.data.user;
          if (res.data.data.user.user_name == null) {
            res.data.data.user.user_name = res.data.data.user.user_phone;
          }
          this.user_name = res.data.data.user.user_name;
          this.user_phone = res.data.data.user.user_phone;
          this.friend_account = res.data.data.friend_account;

          if (
            localStorage.getItem("goods_id") &&
            localStorage.getItem("goods_id_type")
          ) {
            localStorage.removeItem("goods_id");
            localStorage.removeItem("goods_id_type");
            this.$axios
              .post("/wap/index/good/content", {
                goodsId: localStorage.getItem("goods_id"),
                userId: res.data.data.user.id
              })
              .then(res => {
                if (res.data.code == 0) {
                  localStorage.removeItem("goods_id");
                  localStorage.removeItem("goods_id_type");
                  window.location.href = res.data.url;
                }
              });
            return false;
          }
        });
    },
    to(path, id) {
      if (!this.token) {
        this.$toast("请先登录");
        return false;
      }
      if (id) {
        this.$router.push({
          path: path,
          query: {
            id: id
          }
        });
        return false;
      }
      this.$router.push({
        path: path
      });
    },
    httpGo() {
      if (!this.rsaUrl) {
        return false;
      }
      window.open(this.rsaUrl, "_blank");
    },
    cardto(path) {
      if (!this.token) {
        this.$toast("请先登录");
        return false;
      }
      this.$router.push({
        path: path,
        query: {
          id: this.user.id
        }
      });
    }
  }
};
</script>

<style scoped>
.mine {
  padding-top: 0.4rem;
  background: url("../../assets/img/minebg.png") no-repeat;
  background-size: 100%;
}
.header img {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
}
.card {
  padding: 0.35rem 0.2rem;
  border-radius: 0.15rem;
  margin-top: 0.32rem;
  font-weight: bold;
}
.card .iconfont {
  font-size: 0.44rem;
  color: #f63e40;
  margin-right: 0.1rem;
}
.ability,
.tube {
  padding: 0.32rem;
  border-radius: 0.15rem 0.15rem 0 0;
}
.ability_title {
  margin-bottom: 0.56rem;
  font-weight: bold;
}
.ability img {
  width: 0.6rem;
  height: 0.66rem;
  display: inline-block;
}
/* 关于我们 */
.tube {
  border-radius: 0 0 0.15rem 0.15rem;
}
.tube .iconfont {
  font-size: 0.32rem;
  margin-right: 0.1rem;
}
.tube .icon-yanjing {
  font-size: 0.26rem;
}
.tube_li {
  padding: 0.3rem 0;
}
.login {
  height: 0.9rem;
  line-height: 0.9rem;
}
.icon-shezhi1 {
  font-size: 0.44rem;
}
.h-16 {
  height: 0.256rem;
}
</style>